<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录页面</title>
  <link rel="stylesheet" href="../scss/common.css">
  <link rel="stylesheet" href="../scss/header.css">
  <link rel="stylesheet" href="../scss/login.css">
</head>

<body>
  <div class="login">
    <!--头页面的第一部分-->
    <header>
      <div class="header-box">
        <div class="header" style="width: 1200px;height: 32px;font-size: 12px;line-height: 32px;text-align: right;">
          <!-- 官方网站：<a href="http://gz.gec-edu.org/?gzbdgzbdyueqianpc23"> http://gz.gec-edu</a> -->
          <a href="./login.html">登录</a>
          <a href="./register.html">免费注册</a>
          <a href="#">我的购物车</a>
          <a href="#">我的订单</a>
          <a href="#">设置为首页</a>
          <a href="#">加入收藏</a>
        </div>
      </div>
      <!--头页面的第二部分-->
      <div style="width: 1200px;height: 110px;position: relative">
        <img src="../images/logo.gif" alt="">
        <img src="../images/banner.gif" alt="" style="margin-top: 10px;">
        <div style="position: absolute;right: 50px;top: 30px;font-size: 12px;">
          <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
            <a href="#" class="header-a">关于我们</a></div>
          <div
            style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
            <a href="#" class="header-a">联系方式</a></div>
        </div>
      </div>
      <!--头页面的第三部分-->
      <div style="width: 100%;height: 30px;background-color: #CC3333">
        <div style="width: 1200px;height: 30px;">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">护肤</a></li>
            <li><a href="#">彩妆</a></li>
            <li><a href="#">香氛</a></li>
            <li><a href="#">身体护理</a></li>
            <li><a href="#">礼盒套装</a></li>
            <li><a href="#">母婴专区</a></li>
            <li><a href="#">男士专区</a></li>
            <li><a href="#">粉底</a></li>
            <li><a href="#">粉饼</a></li>
            <li><a href="#">睫毛膏</a></li>
            <li><a href="#">唇彩</a></li>
            <li><a href="#">腮红</a></li>
            <li><a href="#">食品保健</a></li>
            <li><a href="#">瘦身类</a></li>
            <li><a href="#">美容类</a></li>
          </ul>
        </div>
      </div>
    </header>
    <div class="main">
      <div class="login_pic">
        <div class="login_table">
          <p class="to_regist"><a href="./register.html" style="color: #333;">这不是商城用户? 去注册</a></p>
          <form action="" class="login_form">
            <div class="item-line">
              <label for="" style="display: flex;justify-content: space-evenly;">登录名</label>
              <input type="text" id="name" name="username" placeholder="请输入邮箱地址"/>
            </div>
            <div class="item-line">
              <label for="" style="display: flex;justify-content: space-between;"><span>密</span><span>码</span></label>
              <input type="password" id="password" name="username" placeholder="请输入邮箱密码"/>
            </div>
            <div class="item-line">
              <button class="submit"></button>
            </div>
          </form>
          <p class="tip">疯狂源自于梦想 &nbsp; <a href="#">江门五邑</a></p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>